<!DOCTYPE html>
<html>
<head>
    <title>NoteArt</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="static/css/main.css"/>
    <script type="text/javascript" src="static/js/jquery-2.0.3.js"></script>
</head>
<body>
    <div id="blurbg"></div>
    <div id="colorbg"></div>
	<div id="menu">
        <img src="static/img/icon-64.png" alt=""/>
        <div id="menus">
            <ul>
                <li><span data-i18n="menu01">File</span>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-i18n="menu11" data-action="meta.new.dialog"><i>New</i><em>Ctrl+N</em></li>
                        <li class="sub-menu-item" data-i18n="menu12" data-action="load.file"><i>Open</i><em>O</em></li>
                        <li class="sub-menu-item" data-i18n="menu13" data-action="save.file"><i>Save</i><em>S</em></li>
                        <li class="sub-menu-item" data-i18n="menu14" data-action="saveas.file">Save As</li>
                        <li class="sub-menu-item" data-i18n="menu15" data-action="export.file"><i>Export</i><em>E</em></li>
                        <li class="sub-menu-item" data-i18n="mcz01"  data-action="exportMcz.file"><i>Export As Mcz</i></li>
                        <li class="sub-menu-item" data-i18n="menu113"  data-action="mc2bms.file" id="menu_export_bms"><i>Export As BMS</i></li>
                        <li class="sub-menu-item" data-i18n="menu110" data-action="upload.file"><i>Upload</i><em>Ctrl+U</em></li>
                        <li class="sub-menu-item" data-i18n="menu16" data-action="unload.file">Close</li>
                        <li class="sub-menu-item" data-i18n="menu18" data-action="load.sample">Import Sample</li>
                        <li class="sub-menu-item" data-i18n="menu112" data-action="loadmeta.file">Import Chart Meta</li>
                        <li class="sub-menu-item" data-i18n="menu19" data-action="exit.app">Exit</li>
                    </ul>
                </li>
                <li><span data-i18n="menu02" >Edit</span>
                    <ul class="sub-menu">
						<!--<li class="sub-menu-item" data-action="undo.global"><i>Undo</i><em>Z</em></li>
						<li class="sub-menu-item" data-action="redo.global">Redo<em>Shift+Z</em></li>-->
                        <li class="sub-menu-item" data-action="copy.global"><i>Copy</i><em>C</em></li>
                        <li class="sub-menu-item" data-action="paste.global"><i>Paste</i><em>V</em></li>
                        <li class="sub-menu-item" data-action="flipH.global" data-i18n="menu25" id="menu_flip"><i>Flip</i><em>H</em></li>
                        <li class="sub-menu-item" data-action="mirrorH.global" data-i18n="menu26" id="mirror_flip"><i>Mirror Flip</i><em>Ctrl+Shift+H</em></li>
                        <li class="sub-menu-item" data-action="movenote.dialog" data-i18n="menu27"><i>Move note</i></li>
                        <!--<li class="sub-menu-item" data-action="" data-i18n="taiko15" id="menu_crosstrack"><i>Cross-track Copy</i></li>-->
                    </ul>
                </li>
                <li><span data-i18n="menu03" >View</span>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-i18n="menu34" data-action="meta.dialog">Meta</li>
                        <li class="sub-menu-item" data-i18n="menu31" data-action="grid.dialog">Grid</li>
                        <li class="sub-menu-item" data-i18n="menu33" data-action="bpm.dialog">Timing list</li>
                        <li class="sub-menu-item" data-i18n="menu32" data-action="config.dialog">Config</li>
                        <li class="sub-menu-item" data-i18n="menu35" data-action="aux.grid.dialog">Reference line</li>
                        <li class="sub-menu-item" data-i18n="interval01" data-action="interval.grid" id="menu_interval" style="display:none">Min interval</li>
                        <!--<li class="sub-menu-item" data-i18n="menu37" data-action="simplify.note">Chart simplify</li>-->
                    </ul>
                </li>
                <li><span data-i18n="menu04" >Tools</span>
					<ul class="sub-menu">
                        <li class="sub-menu-item" data-i18n="menu41" data-action="timing.sample">BPM detection</li>
                        <li class="sub-menu-item" data-i18n="menu43" data-action="touch.note" id="menu_convert_touch">Auto convert for touch</li>
                        <li class="sub-menu-item" data-i18n="menu42" data-action="start.test"><i>Test</i><em>F5</em></li>
					</ul>
				</li>
                <li><span data-i18n="menu05" >Help/Online</span>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-i18n="menu51"  data-action="website.urlopen">Website</li>
                        <li class="sub-menu-item" data-i18n="menu55"  data-action="song.urlopen">Online song page</li>
                        <li class="sub-menu-item" data-i18n="menu56"  data-action="chart.urlopen">Online chart page</li>
                        <li class="sub-menu-item" data-i18n="menu53"  data-action="guide.dialog">Guide</li>
                        <li class="sub-menu-item" data-i18n="menu52" data-action="about.dialog">About</li>
                    </ul>
                </li>
            </ul>
		</div>
		<span id="title">Malody NoteArt</span>
        <div class="tool">
            <span id="min"></span>
            <span id="close"></span>
        </div>
	</div>
	<div id="meta">
		<span id="action_edit" class="textfix"></span>
        <a href="#" style="" id="action_login">Click to login</a>
	</div>
	<div id="body">
        <div id="edit">
            <div id="edit_up">
                <!--模版填充-->
            </div>
            <div id="timeline">
                <div id="curr_time" class="g_click" data-action="jumpto">00:00:000</div>
                <div id="timeline_area">
                    <span id="timeline_bar"></span>
                    <span id="timeline_bar_curr"></span>
                    <span id="timeline_bar_icon"></span>
                </div>
                <div id="control">
                    <span class="g_button g_toolicon g_click" data-action="play"><i></i></span>
					<span class="g_button g_toolicon g_click" data-action="stop"><i></i></span>
					<span class="g_button g_toolicon g_click" data-action="speed">1x</span>
                </div>
				<div id="time_speed">
					<span class="g_button g_toolicon g_click" data-action="add"><i></i></span>
					<span class="g_button g_toolicon g_click" data-action="minus"><i></i></span>
				</div>
                <div id="time_jumpto">
                    <span class="textfix">Jump to:</span>
                    <input id="jumpto_val">
                </div>
            </div>
        </div>
        <div id="tool_right">
            <span class="g_barhead"></span>
            <div id="note_meta">
                <div class="line">
                    <span>Selected:</span>
                    <i id="note_meta_num">0</i>
                </div>
                <div class="line2">
                    <span>Sample</span>
                </div>
                <div class="line">
                    <span class="textfix" id="note_meta_sam">None</span>
                    <i class="tool" data-type="sample"></i>
                </div>
                <div class="line2">
                    <span>Layer</span>
                </div>
                <div class="line">
                    <span class="textfix" id="note_meta_layer">None</span>
                    <i class="tool" data-type="layer"></i>
                </div>
                <div class="line2">
                    <span>Volume</span>
                    <i id="note_meta_vol"></i>
                </div>
                <div class="line">
                    <div class="g_slide">
                        <span class="g_slide_bar"></span>
                        <span class="g_slide_ball"></span>
                    </div>
                </div>
                <div class="line3">
                    <span class="g_button g_click" data-type="adv">Offset</span>
                </div>
            </div>
			<div class="g_tab sec">
                <span class="curr" data-type="sample">Samples</span>
                <span data-type="layer">Layers</span>
                <span data-type="review" >Review</span>
			</div>
            <ul id="tool_sample" class="g_list"></ul>
            <ul id="tool_layer" class="g_list"></ul>
			<ul id="tool_review" class="g_list"></ul>
			<ul id="tool_pattern" class="g_list" style="display: none"></ul>
        </div>

        <span class="clear"></span>
	</div>
    <div id="dialog_layer"></div>
	<div id="notify_layer"></div>
	<div id="g_loading">
		<div class="area">
			<div class="loading"></div>
			<span>Wait...</span>
		</div>
	</div>
    <div id="error_layer"></div>
	<div>
		<input type="file" class="g_io" id="global_file_save" nwsaveas/>
		<input type="file" class="g_io" id="global_file_dir" nwdirectory/>
        <input type="file" accept=".jpg,.jpeg,.png" class="g_io" id="global_file_img" />
        <input type="file" accept=".mp3,.wav,.ogg" class="g_io" id="global_file_sound" multiple/>
        <input type="file" accept=".mc,.mce" class="g_io" id="global_file_chart"/>
		<input type="file" class="g_io" id="global_any"/>
    </div>
    <img id="readme_img">
<script type="text/javascript">
    var gui = require('nw.gui');
</script>
<script type="text/javascript">
    require('./app');
    var _event = require('./core/event');
    window.onkeydown = function(e) {
        if(e.keyCode == 32 && e.target == document.body) {
            e.preventDefault();
            //在没有对话框的时候出发空格放歌
            if(!$(".g_dialog:visible").length){
                _event.trigger(_event.events.global.scroll);
            }
            return false;
        }
    };
</script>
</body>
</html>